<template>
  <div class="max">
    <my-header :backBtn='true'></my-header>
    <div class="cont-nof">
      <div class="carousel-box">
        <swiper :options="swiperOption" style="height: 100%;" v-if="data.type =='image'">
          <swiper-slide v-for="(item, index) in data.fileList" :key="index">
            <img :src="item.url" alt="" style="height: 100%">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div v-else>
          <video style="width: 100%;height: 25rem" :controls="true" :src="data.fileList[0].url"></video>
        </div>
      </div>
      <div v-html="data.content" class="daily-content tl"></div>
      <div class="daily-content more tr" style="font-size: 1.4rem;">{{data.time}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: {},
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          autoplay: true,
          delay: 5000,
          centeredSlides: true,
          initialSlide: 0, //设定初始化时slide的索引。
          slidesPerView: 1,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          on: {
            click: function () {
            }
          }
        },
      }
    },
    created() {
      this.data = this.$route.query;

    }
  }
</script>

<style scoped>
  .carousel-box {
    width: 98%;
    height: 25rem;
    background: #D9D9D9;
    margin: 0.5rem auto;
  }

  .daily-content {
    width: 95%;
    margin: auto;
    font-size: 1.6rem;
  }
</style>
